Vitest でテスト用の環境変数を設定する方法を確認してみた

こんにちは、CX事業本部 Delivery部の若槻です。

最近テスティングフレームワークの Vitest の検証を引き続き行っているのですが、テスト実行がとても軽快で気に入っています。

今回は Vitest でテスト用の環境変数を設定する方法を確認してみました。

試してみる

環境

$ npm ls vitest
[email protected] /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app
└── [email protected]

準備

テスト対象のモジュールで環境変数ENV_KEY_1を取得するようなコードを書いてみます。

const ENV_KEY_1 = process.env.ENV_KEY_1;

export const hogeFunc = () => {
  console.log('ENV_KEY_1_ON_HOGE', ENV_KEY_1);
};

テストファイルでも環境変数ENV_KEY_1を取得するようにし、また前述のモジュールをインポートするようにしています。

import { hogeFunc } from './hoge';

import { test, afterAll } from 'vitest';

const ENV_KEY_1 = process.env.ENV_KEY_1;

afterAll((): void => {
  hogeFunc();
});

test('should pass', (): void => {
  console.log('ENV_KEY_1', ENV_KEY_1);
});

npm script に vitest run を追加します。

{
  "scripts": {
    "test": "vitest run"
  }
}

この段階でテストを実行すると、環境変数ENV_KEY_1は未設定なのでもちろん取得できていません。

$ npm run test

> [email protected] test
> vitest run


 RUN  v0.34.3 /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app

stdout | src/hoge.test.ts > should pass
ENV_KEY_1 undefined

stdout | unknown test
ENV_KEY_1_ON_HOGE undefined

 ✓ src/hoge.test.ts (1)
   ✓ should pass

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  20:49:48
   Duration  261ms (transform 55ms, setup 0ms, collect 47ms, tests 1ms, environment 0ms, prepare 61ms)

環境変数を設定してみる

Vitest Configファイルで test.env に KEY:VALUE 形式で環境変数を設定します。

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    env: {
      ENV_KEY_1: 'ENV_VALUE_1',
    },
  },
});

テストを実行すると、環境変数が設定されモジュールおよびテストコードで取得できていることが確認できます。

$ npm run test

> [email protected] test
> vitest run


 RUN  v0.34.3 /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app

stdout | src/hoge.test.ts > should pass
ENV_KEY_1 ENV_VALUE_1

stdout | unknown test
ENV_KEY_1_ON_HOGE ENV_VALUE_1

 ✓ src/hoge.test.ts (1)
   ✓ should pass

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  20:56:51
   Duration  230ms (transform 22ms, setup 0ms, collect 14ms, tests 1ms, environment 0ms, prepare 55ms)

ステージごとに異なる環境変数を設定する

次に、開発環境や本番環境などステージごとに異なる環境変数を使用したい場合を想定した設定をしてみます。

まず各ステージごとの Vitest Config を作成します。それぞれで異なる環境変数を設定しています。

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    env: {
      ENV_KEY_1: 'ENV_VALUE_1_DEV',
    },
  },
});

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    env: {
      ENV_KEY_1: 'ENV_VALUE_1_PRD',
    },
  },
});

そして、vitest コマンドの --config オプションで Vitest Config を指定して実行するようにします。

{
  "scripts": {
    "test:dev": "vitest run --config vite.config.development.ts",
    "test:prd": "vitest run --config vite.config.production.ts"
  }
}

テストを実行すると、ステージごとに異なる環境変数が設定されていることが確認できます。

$ npm run test:dev

> [email protected] test:dev
> vitest run --config vite.config.development.ts


 RUN  v0.34.3 /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app

stdout | src/hoge.test.ts > should pass
ENV_KEY_1 ENV_VALUE_1_DEV

stdout | unknown test
ENV_KEY_1_ON_HOGE ENV_VALUE_1_DEV

 ✓ src/hoge.test.ts (1)
   ✓ should pass

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  20:58:42
   Duration  228ms (transform 24ms, setup 0ms, collect 13ms, tests 1ms, environment 0ms, prepare 54ms)

$ npm run test:prd

> [email protected] test:prd
> vitest run --config vite.config.production.ts


 RUN  v0.34.3 /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app

stdout | src/hoge.test.ts > should pass
ENV_KEY_1 ENV_VALUE_1_PRD

stdout | unknown test
ENV_KEY_1_ON_HOGE ENV_VALUE_1_PRD

 ✓ src/hoge.test.ts (1)
   ✓ should pass

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  20:58:47
   Duration  252ms (transform 24ms, setup 0ms, collect 13ms, tests 1ms, environment 0ms, prepare 55ms)

各ステージで共通のコンフィグや環境変数を使用したい場合

前述の方法ではステージごとに Vitest Config ファイルを分けましたが、一部コンフィグや環境変数は共通化したい場合もあるかと思います。

その場合は、次のような共有用の JSON ファイルを作成します。

import path from 'path';
import { UserConfig } from 'vitest/config';

export const configShared: UserConfig = {
  test: {
    alias: {
      '@': path.resolve(__dirname, '.'),
    },
    env: {
      COMMON_ENV: 'COMMON_VALUE',
    },
  },
};

そして各ステージの Vitest Config ファイルで共有用の JSON ファイルをインポートして使用します。

import { defineConfig } from 'vitest/config';
import { configShared } from './vite.shared';

export default defineConfig({
  test: {
    ...configShared.test,
    env: {
      ...configShared.test!.env,
      ENV_KEY_1: 'ENV_VALUE_1_DEV',
    },
  },
});

import { defineConfig } from 'vitest/config';
import { configShared } from './vite.shared';

export default defineConfig({
  test: {
    ...configShared.test,
    env: {
      ...configShared.test!.env,
      ENV_KEY_1: 'ENV_VALUE_1_PRD',
    },
  },
});

テストファイルを修正します。

import { test } from 'vitest';

const ENV_KEY_1 = process.env.ENV_KEY_1;
const COMMON_ENV = process.env.COMMON_ENV;

test('should pass', (): void => {
  console.log('ENV_KEY_1', ENV_KEY_1);
  console.log('COMMON_ENV', COMMON_ENV);
});

テストを実行すると、ステージごとの環境変数と共有用の環境変数が設定されていることが確認できます。

$ npm run test:dev

> [email protected] test:dev
> vitest run --config vite.config.development.ts


 RUN  v0.34.3 /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app

stdout | src/hoge.test.ts > should pass
ENV_KEY_1 ENV_VALUE_1_DEV
COMMON_ENV COMMON_VALUE

 ✓ src/hoge.test.ts (1)
   ✓ should pass

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  21:14:15
   Duration  236ms (transform 19ms, setup 0ms, collect 10ms, tests 2ms, environment 0ms, prepare 50ms)

おわりに

Vitest でテスト用の環境変数を設定する方法を確認してみました。

公式ドキュメントに詳しい記載が無かったので、方法を探すのに若干苦労しました。

これから Vitest を触ってみよう方の参考になれば幸いです。

以上